import React, { Component } from "react";

// 使用PropTypes进行类型检查
import PropTypes from "prop-types";

class CourseItem extends Component {
    static propTypes = {
        name: PropTypes.string,
        stu: PropTypes.number.isRequired,
        task: PropTypes.number,
    };

    // ! 使用defaultProps设置默认值
    // todo 当属性没传的时候,才使用默认值
    static defaultProps = {
        name: "同步课",
    };

    render() {
        const { stu, name, task } = this.props;

        // 当传入的参数是对象的时候的解构
        // const {data:{stu,name,task}} = this.props;

        /* style属性接收一个javascript对象,其属性用小驼峰命名法命名，
        而不是接收CSS字符串 */

        return (
            <div
                style={{
                    width: 200,
                    border: "1px solid red",
                    textAlign: "center",
                    padding: 20,
                }}
            >
                <h2>{name}</h2>
                <p>任务数:{task + "1"}</p>
                <p>人数:{stu}</p>
                <button>申请</button>
            </div>
        );
    }
}

// !使用PropTypes进行类型检查
/* CourseItem.propTypes = {
    name: PropTypes.string,
    stu: PropTypes.number,
    task: PropTypes.number,
} */

export default CourseItem;
